<template>
    <view class="reservation-container">
        <header-vue title="预约" :back="true" :backUrl="backUrl"></header-vue>
        <view class="mask-container" :class="{ 'show': showDatePickerPopup }" @click="closeDatePicker"></view>
        <!-- 日期选择 -->
        <view class="date-section" v-if="!is_bidding">
            <view class="date-display" @click="toggleDatePicker">
                <text class="date-text">{{ selectedDate }}</text>
            </view>
            <view class="date-icon" @click="toggleDatePicker">
                <u-icon name="calendar" size="25" color="#e19f33"></u-icon>
            </view>
            <view class="date-picker-popup" :class="{ 'show': showDatePickerPopup }">
                <!-- 使用uni-calendar组件 -->
                <view class="calendar-container">
                    <uni-calendar :insert="true" :lunar="false" :start-date="startDate" :end-date="endDate"
                        @change="onCalendarChange" @monthSwitch="onMonthSwitch" />
                </view>
            </view>
        </view>

        <view class="cont-box" @click="closeAllPop" v-if="!is_bidding">

            <!-- 时间选择网格 -->
            <view class="time-grid-section">
                <view class="time-grid">
                    <view v-for="time in timeSlots" :key="time.value" class="time-slot" :class="{
                        'selected': selectedTime === time.value,
                        'booked': time.booked,
                        'disabled': isTimeDisabled(time.value)
                    }" @click.stop="selectTime(time)">
                        <text class="time-text">{{ time.label }}</text>
                        <view v-if="time.booked" class="booked-tag">约满</view>
                    </view>
                </view>
            </view>

            <!-- 师傅选择 -->
            <view class="master-selection-section">
                <view class="section-title">
                    <u-image :src="IMAGE_URL + '/static/housekeep/icon11.png'" mode="aspectFill" width="32rpx"
                        height="24rpx"></u-image>
                    <text>师傅选择</text>
                </view>
                <view class="selection-options">
                    <view class="option-item" :class="{ 'selected': selectedMaster === 'platform' }"
                        @click.stop="selectMaster('platform'); closeAllPop()">
                        <view class="radio-circle">
                            <u-icon v-if="selectedMaster === 'platform'" name="checkmark" size="12"
                                color="#FFFFFF"></u-icon>
                        </view>
                        <text class="option-text">平台派单</text>
                    </view>

                    <view class="option-item" :class="{ 'selected': selectedMaster === 'manual' }"
                        @click.stop="selectMaster('manual')">
                        <view class="radio-circle">
                            <u-icon v-if="selectedMaster === 'manual'" name="checkmark" size="12"
                                color="#FFFFFF"></u-icon>
                        </view>
                        <text class="option-text">手动选择师傅</text>
                    </view>
                </view>
            </view>

            <!-- 排序筛选（仅手动选择师傅时显示） -->
            <view class="filter-section" v-if="selectedMaster === 'manual'">
                <view class="filter-btn" :class="{ 'active': categoryFilterShow }" @click.stop="showCategoryFilter">
                    <text>{{ selectedCategory }}</text>
                    <u-icon class="icon-arrow-down" name="arrow-down" size="12"></u-icon>
                </view>
                <!-- 排序筛选选择框 -->
                <view class="filter-pop-container" v-show="sortFilterShow" @click.stop>
                    <filter-pop :list="sortFilterList" @radioChange="onSortFilterChange" :activeColor="'#0785CF'"
                        :placement="'column'" />
                </view>
            </view>

            <!-- 手动选择师傅列表 -->
            <view v-if="selectedMaster === 'manual'" class="master-list-section">
                <view v-for="master in masters" :key="master.id" class="master-card"
                    :class="{ active: selectedMasterId === master.id }" @click.stop="selectMasterCard(master.id)">
                    <u-image :src="master.touxiang" width="160rpx" height="160rpx" class="master-avatar"></u-image>
                    <view class="master-info">
                        <view class="master-row">
                            <view>
                                <text class="master-name">{{ master.title }}</text>
                                <text class="master-age">{{ master.age }}岁</text>
                                <text class="master-area">{{ master.district_name }}</text>
                            </view>
                            <view class="master-distance">
                                <u-icon name="map" size="15"></u-icon>
                                <text>{{ getDistance(master.latitude, master.longitude) }}</text>
                            </view>
                        </view>
                        <view class="master-row">
                            <text class="master-years">从业时间：{{ master.work_years }}年</text>
                        </view>
                        <view>
                            <text class="master-score">{{ master.rating }}分</text>
                            <text class="master-orders">{{ master.recent_orders_text }}</text>
                        </view>
                    </view>
                </view>
                
                <!-- 加载状态提示 -->
                <view v-if="loading" class="loading-tip">
                    <u-loading-icon mode="spinner" size="20"></u-loading-icon>
                    <text>加载中...</text>
                </view>
                
                <!-- 没有更多数据提示 -->
                <view v-if="!hasMore && masters.length > 0" class="no-more-tip">
                    <text>没有更多数据了</text>
                </view>
                
                <!-- 空状态提示 -->
                <view v-if="!loading && masters.length === 0" class="empty-tip">
                    <u-empty text="暂无师傅数据" mode="data"></u-empty>
                </view>
            </view>

            <!-- 底部说明 -->
            <view class="bottom-section" v-else>
                <view class="illustration">
                    <u-image :src="IMAGE_URL + '/static/housekeep/pt_img.png'" mode="aspectFill" width="240rpx"
                        height="192rpx"></u-image>
                </view>
                <view class="description">
                    <text>严格考核家政人员，只为派送最优服务</text>
                </view>
            </view>
        </view>

        <view v-else class="calendar-container padding0">
            <!-- <uni-calendar :insert="true" :lunar="false" :range="true" :start-date="startDate" :end-date="endDate"
                @change="onCalendarChange" @monthSwitch="onMonthSwitch" /> -->
            <u-calendar 
                ref="embedCalendar"
                :show="true" 
                mode="range" 
                :popupShow="false" 
                rowHeight="64rpx" 
                :showMark="false" 
                color="#DF9824"
                @confirm="confirm"
            ></u-calendar>
        </view>

        <!-- 底部按钮 -->
        <fixed-footer>
            <view class="confirm-btn" v-if="!is_bidding" @click="confirmReservation">确认</view>
            <view class="confirm-btn" v-else @click="confirmEmbedReservation">确认</view>
        </fixed-footer>
    </view>
</template>

<script>
import filterPop from '@/components/filter-pop/index.vue'
import fixedFooter from '@/components/fixed-footer/index.vue'
import { getservicetimeList, getHousekeepTechnicalList } from '@/api/index.js'
import headerVue from '@/components/header.vue'
import appConfig from '@/config/app.js'

export default {
    components: { filterPop,fixedFooter,headerVue },
    data() {
        return {
            is_bidding: false,
            selectedTime: '',
            selectedMaster: 'platform',
            selectedDate: '',
            showDatePickerPopup: false,
            selectedMasterId: null,
            selectedCategory: '默认排序',
            categoryFilterShow: false,
            sortFilterShow: false,
            sortFilterList: [
                { name: '默认排序', active: true },
            ],
            masters: [],
            timeSlots: [],
            selectedTimeSetFlag: false,
            // 分页相关
            page: 1,
            limit: 10,
            hasMore: true,
            loading: false,
            historyMasterId: null,
            backUrl:'',
            IMAGE_URL: appConfig.IMAGE_URL,
        }
    },
    computed: {
        startDate() {
            const today = new Date()
            return this.formatDate(today)
        },
        endDate() {
            const maxDate = new Date()
            maxDate.setFullYear(maxDate.getFullYear() + 10)
            return this.formatDate(maxDate)
        },
        // 全局预约
        reservationState() {
            return (this.$store && this.$store.getters && this.$store.getters.reservation) || { date: '', time: '' }
        },
        
    },
    onLoad(option) {
        this.is_bidding = option.isBidding == 'true' ? true : false || false
        this.getservicetimeListEvent()
        // 重置分页并重新加载师傅列表
        this.resetPagination()
        this.getHousekeepTechnicalListEvent()
        if (this.$store.getters.selectedMaster) {
            this.selectedMasterId = this.historyMasterId = this.$store.getters.selectedMaster.id || null
        } else {
            this.selectedMasterId = this.historyMasterId = null
        }
        this.backUrl = `/views/order/confirm-order?isBidding=${this.is_bidding}`
    },
    onShow() {
        // 若订单页已有时间，进入时回显并高亮；否则默认使用今天
        const r = this.reservationState
        const today = this.formatDate(new Date())
        this.selectedDate = (r && r.date) ? r.date : today
        this.selectedTime = (r && r.time) ? r.time : (this.selectedTime)
        // 根据已选日期获取当天可选时间并设置默认时间
        this.selectedTimeSetFlag = false
        // this.getservicetimeListEvent()
    },
    // 触底加载更多
    onReachBottom() {
        this.loadMore()
    },
    methods: {
        closeAllPop() {
            this.categoryFilterShow = false
            this.sortFilterShow = false
        },
        showCategoryFilter() {
            this.sortFilterShow = !this.sortFilterShow
            this.categoryFilterShow = this.sortFilterShow
        },
        onSortFilterChange(e) {
            const name = (typeof e === 'string') ? e : (e?.name || e?.label || '')
            if (!name) return
            this.selectedCategory = name
            this.sortFilterList = this.sortFilterList.map(item => ({ ...item, active: item.name === name }))
            this.sortFilterShow = false
            this.categoryFilterShow = false
            
            // 切换排序时重置分页并重新加载
            // if (this.selectedMaster === 'manual') {
            //     this.resetPagination()
            //     this.getHousekeepTechnicalListEvent()
            // }
        },
        initCurrentDate() {
            const now = new Date()
            this.selectedDate = this.formatDate(now)
        },
        formatDate(date) {
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        isTimeDisabled(time) {
            const now = new Date()
            const selectedDate = new Date(this.selectedDate)
            if (this.isSameDate(now, selectedDate)) {
                const currentTime = now.getHours() * 60 + now.getMinutes()
                const [hours, minutes] = time.split(':').map(Number)
                const timeInMinutes = hours * 60 + minutes
                const disabled = timeInMinutes <= currentTime
                // 如果selectedTime还未设置，且当前时间段未被禁用，则设置selectedTime为该时间段
                if (!disabled && !this.selectedTimeSetFlag) {
                    this.selectedTime = time
                    this.selectedTimeSetFlag = true
                }
                return disabled
            }
            return false
        },
        isSameDate(date1, date2) {
            return date1.getFullYear() === date2.getFullYear() &&
                date1.getMonth() === date2.getMonth() &&
                date1.getDate() === date2.getDate()
        },
        toggleDatePicker() {
            this.showDatePickerPopup = !this.showDatePickerPopup
            this.sortFilterShow = false
        },
        closeDatePicker() {
            this.showDatePickerPopup = false
        },
        onCalendarChange(e) {
            if (e.fulldate) {
                const selectedDate = new Date(e.fulldate)
                const today = new Date()
                if (selectedDate < today && !this.isSameDate(selectedDate, today)) {
                    uni.showToast({ title: '不能选择过去的日期', icon: 'none' })
                    return
                }
                this.selectedDate = e.fulldate
                // 切换日期后重置并重新获取时间段与默认时间
                this.selectedTime = ''
                this.selectedTimeSetFlag = false
                if (this.is_bidding) return;
                this.toggleDatePicker()
                this.getservicetimeListEvent()
            }
        },
        onMonthSwitch(e) { },
        confirmDateSelection() {
            this.closeDatePicker()
            uni.showToast({ title: '日期选择成功', icon: 'success' })
        },
        selectTime(time) {
            if (time.booked || this.isTimeDisabled(time.value)) return
            this.selectedTime = time.value
        },
        selectMaster(master) {
            this.selectedMaster = master
        },
        selectMasterCard(id) {
            this.selectedMasterId = id
            this.getservicetimeListEvent()
        },
        confirmReservation() {
            if (!this.selectedTime) {
                uni.showToast({ title: '请选择预约时间', icon: 'none' })
                return
            }
            const payload = { date: this.selectedDate, time: this.selectedTime }
            if (this.$store && this.$store.commit) {
                this.$store.commit('SET_RESERVATION', payload)
            }
            // 手动选择师傅 -> 跳转到师傅详情页
            if (this.selectedMaster === 'manual') {
                if (!this.selectedMasterId) {
                    // 未选择具体师傅，进入师傅详情页让用户选择或确认
                    uni.redirectTo({ url: '/views/housekeep/service' })
                    return
                }
                uni.redirectTo({ url: `/views/housekeep/master-details?id=${this.selectedMasterId}` })
                return
            }
            // 平台派单 -> 清空已选师傅，保存预约并返回
            if (this.$store && this.$store.commit) {
                this.$store.commit('SET_SELECTED_MASTER', null)
            }
            uni.showToast({ title: '预约已保存', icon: 'success' })
            setTimeout(() => { uni.navigateBack() }, 600)
        },
        confirmEmbedReservation() {
            // 触发内嵌日历的确认事件，由下方 confirm(e) 统一处理
            this.$refs.embedCalendar && this.$refs.embedCalendar.confirm()
        },
        confirm(e) {
            // e 为u-calendar返回的选择结果
            // range模式下：为包含起止在内的完整日期数组，如 ['2025-08-19', ..., '2025-09-04']
            const selected = Array.isArray(e) ? e : []
            if (!selected.length) {
                uni.showToast({ title: '请选择日期范围', icon: 'none' })
                return
            }

            const start = selected[0]
            const end = selected[selected.length - 1]
            const dateRangeText = start === end ? start : `${start} 至 ${end}`

            // 保存到全局，与 confirmReservation 行为保持一致
            const payload = { date: dateRangeText, time: '' }
            if (this.$store && this.$store.commit) {
                this.$store.commit('SET_RESERVATION', payload)
            }

            // 反馈并返回订单页展示
            uni.showToast({ title: '预约已保存', icon: 'success' })
            setTimeout(() => { uni.navigateBack() }, 600)
        },
        getservicetimeListEvent() {
            const selectDate = this.selectedDate || this.formatDate(new Date())
            getservicetimeList({
                selectDate,
                technicalId:this.selectedMasterId
            }).then(res => {
                if (res && res.errno === 0) {
                    const list = Array.isArray(res.data) ? res.data : []
                    this.timeSlots = list.map(item => ({
                        label: item.begin_time,
                        value: item.begin_time,
                        booked: item.disable
                    }))
                    // 重新计算默认可选时间
                    this.setDefaultSelectedTime()
                }
            })
        },
        // 根据当前selectedDate与timeSlots，设置默认的selectedTime，reservation有值时，优先使用reservation的time,每次切换师傅时，reservation有没有值都要重置selectedTime
        setDefaultSelectedTime() {
            if (this.reservationState.time && this.selectedMasterId == this.historyMasterId ) {
                this.selectedTime = this.reservationState.time
                this.selectedTimeSetFlag = true
                return
            }
            const todayStr = this.formatDate(new Date())
            const isToday = this.selectedDate === todayStr
            const now = new Date()
            const nowMinutes = now.getHours() * 60 + now.getMinutes()
            for (const t of this.timeSlots) {
                if (t.booked) continue
                const [h, m] = (t.value || '').split(':').map(Number)
                if (Number.isNaN(h) || Number.isNaN(m)) continue
                const minutes = h * 60 + m
                if (isToday && minutes <= nowMinutes) continue
                this.selectedTime = t.value
                this.selectedTimeSetFlag = true
                break
            }
        },
        getHousekeepTechnicalListEvent() {
            if (this.loading || !this.hasMore) return
            
            this.loading = true
            getHousekeepTechnicalList({
                page: this.page,
                limit: this.limit
            }).then((res) => {
                if (res.errno === 0) {
                    const list = (res.data && res.data.list) || []
                    const total = res.data?.total || 0
                    
                    if (this.page === 1) {
                        // 第一页，直接替换数据
                        this.masters = list
                    } else {
                        // 加载更多，追加数据
                        this.masters = [...this.masters, ...list]
                    }
                    
                    // 判断是否还有更多数据
                    this.hasMore = this.masters.length < total
                    
                    // 如果还有数据，页码+1
                    if (this.hasMore) {
                        this.page++
                    }
                }
            }).catch(err => {
                console.error('获取师傅列表失败:', err)
                uni.showToast({ title: '加载失败，请重试', icon: 'none' })
            }).finally(() => {
                this.loading = false
            })
        },
        
        // 重置分页数据
        resetPagination() {
            this.page = 1
            this.hasMore = true
            this.masters = []
        },
        
        // 触底加载更多
        loadMore() {
            if (this.selectedMaster === 'manual' && this.hasMore && !this.loading) {
                this.getHousekeepTechnicalListEvent()
            }
        },
        
        // 手动选择师傅时重置分页
        selectMaster(master) {
            this.selectedMaster = master
            if (master === 'manual') {
                this.resetPagination()
                this.getHousekeepTechnicalListEvent()
            }
        },
        // 根据经纬度获取距离（单位：米，保留两位小数，自动转为km显示）
        getDistance(x, y) {
            return 0 ;
            // 获取当前位置的经纬度
            let currentLat = 0
            let currentLng = 0
            try {
                const location = uni.getStorageSync('user_location')
                if (location && location.latitude && location.longitude) {
                    currentLat = location.latitude
                    currentLng = location.longitude
                } else {
                    // 若未缓存，使用默认值或提示
                    return '--'
                }
            } catch (e) {
                return '--'
            }
            // 计算两点间距离（Haversine公式）
            function toRad(d) {
                return d * Math.PI / 180
            }
            const radLat1 = toRad(currentLat)
            const radLat2 = toRad(Number(x))
            const deltaLat = radLat1 - radLat2
            const deltaLng = toRad(currentLng) - toRad(Number(y))
            const a = Math.sin(deltaLat / 2) ** 2 +
                Math.cos(radLat1) * Math.cos(radLat2) * Math.sin(deltaLng / 2) ** 2
            const c = 2 * Math.asin(Math.sqrt(a))
            const earthRadius = 6378137 // 地球半径，单位米
            let distance = earthRadius * c
            if (distance > 1000) {
                return (distance / 1000).toFixed(2) + 'km'
            } else {
                return distance.toFixed(0) + 'm'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.reservation-container {
    background: #F6F6F6;
    min-height: 100vh;
    position: relative;
    padding-bottom: 200rpx;
}

.mask-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;

    &.show {
        opacity: 1;
        visibility: visible;
    }
}

.date-section {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 32rpx;
    background: #FFFFFF;
    z-index: 99;

    .date-text {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
    }

    .date-icon {
        padding: 8rpx;
    }
}

.cont-box {
    padding: 48rpx 32rpx 0;
    background: #F6F6F6;
}

.time-grid-section {
    margin-bottom: 40rpx;
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
}

.time-slot {
    position: relative;
    width: 152rpx;
    height: 68rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
}

.time-slot.selected {
    background: #FFFFFF;
    border-color: #DF9824;
}

.time-slot.booked,
.time-slot.disabled {
    pointer-events: none;

    .time-text {
        color: #999;
    }
}

.time-text {
    font-size: 28rpx;
    color: #333;
}

.booked-tag {
    position: absolute;
    top: 0;
    right: 0;
    width: 42rpx;
    height: 22rpx;
    background: #FF4141;
    font-weight: 400;
    font-size: 16rpx;
    color: #FFFFFF;
    box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.06);
    border-radius: 0 8rpx 0 8rpx;
    text-align: center;
    line-height: 22rpx;
}

.master-selection-section {
    margin-bottom: 16rpx;
}

.section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
}

.selection-options {
    display: flex;
    gap: 24rpx;
    background: #FFFFFF;
    box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.06);
    border-radius: 8rpx;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 20rpx;
    border-radius: 12rpx;
    transition: all 0.3s ease;
}

.radio-circle {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    transition: all 0.3s ease;
    border: 2rpx solid #0785CF;
}

.option-item.selected .radio-circle {
    border-color: #0785CF;
    background: #0785CF;
}

.option-text {
    font-size: 28rpx;
    color: #333;
}

.filter-section {
    position: relative;
    display: flex;
    margin-top: 28rpx;
}

.filter-btn {
    padding: 0 15rpx;
    height: 52rpx;
    background: #FFFFFF;
    box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.08);
    border-radius: 8rpx;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 20rpx;
}

.filter-btn text {
    font-size: 24rpx;
    color: #333333;
}

.filter-btn .icon-arrow-down {
    margin-left: 6rpx;
    font-size: 20rpx;
    color: #999999;
    transition: transform 0.3s ease;
}

.filter-btn.active .icon-arrow-down {
    transform: rotate(180deg);
}

.filter-pop-container {
    position: absolute;
    width: 100%;
    z-index: 99;
    top: 52rpx;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 0 20rpx 20rpx 20rpx;
    border-bottom: 1rpx solid #EEEEEE;
}

.master-list-section {
    margin: 32rpx 0;
}

.master-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
    margin-bottom: 24rpx;
    padding: 28rpx;
    border: 2rpx solid transparent;
}

.master-card.active {
    border-color: #DF9824;
}

.master-avatar {
    border-radius: 16rpx;
    margin-right: 24rpx;
}

.master-info {
    flex: 1;
    width: 100%;
    height: 160rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.master-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.master-name {
    font-size: 32rpx;
    color: #333333;
    font-size: 32rpx;
    margin-right: 8rpx;
}

.master-age {
    font-size: 24rpx;
    color: #DF9824;
    margin-right: 8rpx;
}

.master-distance {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;
}

.master-score {
    font-size: 28rpx;
    color: #FF4141;
    margin-right: 12rpx;
}

.master-orders {
    font-size: 20rpx;
    color: #999;
}

.master-area,
.master-years {
    font-size: 24rpx;
    color: #999;
    margin-right: 8rpx;
}

.bottom-section {
    margin-top: 160rpx;
    text-align: center;
    margin-bottom: 60rpx;
}

.illustration {
    position: relative;
    height: 200rpx;
    margin-bottom: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.description {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
}

.bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #F0F0F0;
}

.confirm-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #FFFFFF;
    box-shadow: 0 4rpx 20rpx rgba(7, 133, 207, 0.3);
}

.date-picker-popup {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 0 0 20rpx 20rpx;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.date-picker-popup.show {
    z-index: 98;
    transform: translateY(99.5%);
}

.calendar-container {
    flex: 1;
    padding: 0 32rpx;
}

.padding0 {
    height: 100%;
}

.loading-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
    color: #999;
    font-size: 28rpx;
    gap: 16rpx;
}

.no-more-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
    color: #999;
    font-size: 28rpx;
    position: relative;
    
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 60rpx;
        height: 1rpx;
        background: #E5E5E5;
    }
    
    &::before {
        left: 50%;
        transform: translateX(-120rpx);
    }
    
    &::after {
        right: 50%;
        transform: translateX(120rpx);
    }
}

.empty-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80rpx 0;
}
</style>
